<script setup lang="ts">
import { ref } from 'vue';
import useUserStore from '@/store/user';
import { ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
// 用户名和密码
const userList = ref({
    username: 'ZWX846533',
    password: 'HUAWEI7410.'
});

// 表单验证规则
const rusername = (_rule: any, value: any, callback: any) => {
    // rule: 规则,没啥用
    // value: 输入值
    // callback: 回调函数,如果符合规则,则调用callback()，否则调用callback(new Error('错误提示'))

    if (/^\d+$/.test(value) || value.length < 6) {
        callback(new Error('用户名不能为纯数字且长度不能少于6位'))
    } else if (value === '') {
        callback(new Error('请输入用户名'))
    } else {
        callback() //通过
    }
}

const rpassword = (_rule: any, value: any, callback: any) => {
    if (value === '' || value.length < 6) {
        callback(new Error('密码长度不能少于6位'))
    } else {
        callback() //通过
    }
}

const rules = {
    username: [
        { validator: rusername, trigger: 'change' }
    ],
    password: [
        { validator: rpassword, trigger: 'change' }
    ]
}

const loginForm = ref(); // 表单对象


// 登录按钮点击事件
const loginSubmit = async () => {
    // 这句可保证表单全部验证通过才提交
    await loginForm.value.validate();
    let res:any=await userStore.userlogin(userList.value);
    if (res==='ok') {
        ElNotification({
            title: 'Success',
            message: res,
            type: 'success',
        });
        // 跳转到主页
        router.push('/home');
    }else {
        ElNotification({
            title: 'Error',
            message: res,
            type: 'error',
        })
    }

}
</script>

<template>
    <div class="logbox">
        <el-form class="logbox-content" ref="loginForm" :model="userList" :rules="rules">
            <h1>安吉物流管理系统</h1>
            <h2>Please enter your username and password</h2>
            <el-form-item prop="username">
                <el-input v-model="userList.username" placeholder="请输入用户名" prefix-icon="UserFilled"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="userList.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                    show-password></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%;" @click="loginSubmit">登录</el-button>
        </el-form>

    </div>
</template>

<style scoped lang="scss">
.logbox {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    padding: 20px;

    .logbox-content {
        position: absolute;
        top: 40%;
        right: 10%;
        width: 600px;
        height: 300px;
        background: url('@/assets/images/login_form.png') no-repeat center center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        box-shadow: 0 0 10px #000;
        padding: 20px;

        h1 {
            font-size: 40px;
            color: #2E8B57;
            text-align: center;
        }

        h2 {
            font-size: 24px;
            color: #fc7da0;
            text-align: center;
            margin: 20px 0;
        }
    }
}
</style>